<template>
    <div>
        <el-table
                :data="tableData"
                style="width: 100%"
                stripe
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    >
            </el-table-column>
            <el-table-column
                    prop="image"
                    label="图片"
                    >
                <template v-slot:default="scope">
                    <img :src="scope.row.image" width="100" height="100" alt="">
                </template>
            </el-table-column>
            <el-table-column
                    label="管理">
                <template v-slot:default="scope">
                    <button type="button" @click="delItem(scope.$index)">删除</button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top:10px;">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-count="pageCount"
                    @current-change="changePage"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Table,TableColumn,Pagination} from 'element-ui';
    import {request} from "../../assets/js/utils/request";
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Pagination);
    export default {
        name: "my-table",
        data(){
            return {
                tableData: [],
                multipleSelection:[],
                pageCount:0
            }
        },
        created(){
            this.getData();
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val);
            },
            delItem(index){
                this.tableData.splice(index, 1);
            },
            changePage(page){
                console.log(page);
                this.getData(page);
            },
            getData(page=1){
                request(this.$config.baseApi+"/home/goods/search?kwords=&page="+page+"&token="+this.$config.token).then(res=>{
                    // console.log(res);
                    if (res.code===200){
                        this.tableData=res.data;
                        this.pageCount=parseInt(res.pageinfo.pagenum)
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>